<template>
	<view class="page-my">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
		<view class="my_info">
			<image src="../../static/my/my_bg.png" />
			<view class="my_info_con">
				<view class="my_header">
					<view class="my_header_left">
						<image class="my_header_icon" src="../../static/my/my_icon.png" />
						<view class="my_header_title">
							<view class="my_header_logIn" v-if="!userInfo">点击登录</view>
							<view class="my_header_user" v-else>
								<view class="my_header_userName">{{ userInfo.userName }}</view>
								<!-- <view class="my_header_birthday">公历生日 2020年5月9日</view> -->
								<!-- <view class="my_header_birthday">农历生日 2020年5月9日</view> -->
							</view>
						</view> 
					</view>
					<!-- <view class="my_header_right">
						<image src="../../static/my/my_right_icon.png" />
					</view> -->
				</view>
				<view class="my_title">
					“窥探命运之脉络，揭示人生变迁之规律”
				</view>
			</view>
		</view>
		<view class="my_content">
			<view class="my_item" @click="toPages(item.path)"
			 v-for="(item, index) in contentList" :key="index">
			 	<image class="my_item_bg" src="../../static/my/list_bg.png" />
				<view class="my_item_con">
					<view class="my_item_icon">
						<image src="../../static/my/older_icon.png" v-if="index == 0" />
						<image src="../../static/my/other_icon.png" v-else />
					</view>
					<view class="my_item_title">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue";
import { onLoad } from '@dcloudio/uni-app'

onLoad(()=>{
	userInfo.value = uni.getStorageSync("userInfo");
})

let userInfo = ref(null);
const contentList = ref([
	// { title: '我的订单', path: '/pages/older/typeList' },
	{ title: '我的订单', path: '/pages/older/index' },
	// { title: '八字详解', path: '/pages/eightCharacterExplan/index' },
	// { title: '紫微斗数', path: '/pages/ziweiDoushu/index' },
	// { title: '八字合婚', path: '/pages/eightCharacterMarriage/index' },
	// { title: '算姻缘', path: '/pages/lifelongMarriage/index' },
	// { title: '起名字', path: '/pages/giveName/index' },
])
const toPages = function (path) {
	uni.navigateTo({
		url: path
	});
}
</script>

<style lang="scss" scoped>
	.page-my {
		box-sizing: border-box;
		padding: 30rpx;
		.my_info {
			position: relative;
			width: 686rpx;
			height: 376rpx;
			&>image {
				width: 100%;
				height: 100%;
			}
		}
		.my_info_con {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 486rpx;
			height: 250rpx;
			.my_header {
				padding-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.my_header_left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.my_header_icon {
					margin-right: 10rpx;
					width: 96rpx;
					height: 96rpx;
				}
				.my_header_logIn {
					font-size: 36rpx;
					font-weight: 700;
					letter-spacing: 0;
					line-height: 52rpx;
					color: rgba(117, 72, 59, 1);
				}
				.my_header_userName {
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 0;
					color: rgba(117, 72, 59, 1);
				}
				.my_header_birthday {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0;
					color: rgba(56, 56, 56, 1);
				}
			}
			.my_header_right {
				&>image {
					width: 16rpx;
					height: 26rpx;
				}
			}
			.my_title {
				white-space: nowrap;
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 40rpx;
				color: rgba(117, 72, 59, 1);
			}
		}
		.my_content {
			margin-top: 20rpx;
		}
		.my_item {
			position: relative;
			margin-bottom: 20rpx;
		}
		.my_item_bg {
			width: 100%;
			height: 100rpx;
		}
		.my_item_con {
			position: absolute;
			top: 50%;
			left: 44rpx;
			transform: translateY(-50%);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;
			// padding: 28rpx 48rpx;
		}
		.my_item_icon {
			margin-right: 20rpx;
			width: 32rpx;
			height: 32rpx;
			&>image {
				width: 100%;
				height: 100%;
			}
		}
		.my_item_title {
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0;
			line-height: 46rpx;
			color: rgba(117, 72, 59, 1);
		}
	}
</style>